<template>
  

    <!-- <transition name="el-zoom-in-center"> -->
<el-drawer @close='reset'
  title="我是标题"
  :visible.sync="drawer"
 :direction="direction"
  size='70%'>

<el-form :rules='rules' ref="form" :model="form" label-width="80px">
  <el-form-item prop='stem' label="书名">
    <el-input  v-model="form.stem"  style="width:50%"></el-input>
  </el-form-item>
   <el-form-item prop='content'  label="内容">
   <quill-editor v-model="form.content"></quill-editor>
  </el-form-item>
  <el-form-item>
    

<el-row>
  <el-button icon="el-icon-search"   @click="onSubmit" circle>立即创建</el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" @click="drawer=false" circle></el-button>
</el-row>

  </el-form-item>
</el-form>


</el-drawer>
 <!-- </transition> -->

</template>

<script>

function newForm(){

return {stem:'',
           content:''}
}


import {addAPI} from '../../../api/article'
export default {
    data() {
        return {
           drawer:false,
           direction:"ttb",
           form:newForm(),
           rules:{
            stem:[
                { required: true, message: '请输入活动名称', trigger: 'blur' }
            ],
            content:[
                 { required: true, message: '请输入活动名称', trigger: 'blur' }
            ]
           }
        }
    },
    methods: {
      async  onSubmit(){
         await this.$refs.form.validate()
         await addAPI(this.form)
        //  console.log('成功');
        this.$message.success('添加成功')
         this.drawer=false
         this.$emit('reload')
        },
        open() {
            this.drawer=true
        },
        reset(){
this.$refs.form.resetFields()

this.form=newForm()

    
    
}
    }
}
</script>

<style>

</style>